<template>
  <div class="wrap">
    <div class="list">
      <div class="top">
        <span>{{data.nm}}</span>
        <p>{{data.price}}</p>
      </div>
      <div class="middle">
        <span>{{data.dz}}</span>
      </div>
      <div class="bottom">
        <span>{{data.piao}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props:['data']
}
</script>
<style lang="scss" scoped>
.wrap{
    width: 100%;
.list {
  width: 357px;
  height: 93px;
  background-color: whitesmoke;
  padding: 0px 12px;
  margin: 0px 0px 9px;
  overflow: hidden;
  .top {
    display: flex;
    width: 333px;
    height: 24px;
    margin-bottom: 6px;
    margin-top: 6px;
   span {
      height: 34px;
      width: 215px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 16px;
    }
    p {
      width: 90px;
      color: red;
      margin-left: 10px;
      font-size: 12px;
    }
  }
  .middle{
      margin-bottom: 6px;
      span{
          font-size: 12px;
      }
  }
  .bottom{
      margin-top: 12px;
      span{
          color: red;
      }
  }
}
}
</style>